import {
  type ReactNode,
  type FC,
} from 'react'
import styles from './index.module.scss'

export const DemoBlock: FC<{
  background?: string;
  padding?: string;
  title: string;
  children?: ReactNode;
}> = ({
  title,
  padding = '18px 18px',
  background = 'var(--rt-color-background)',
  children,
}) => (
  <div className={styles['demo-block']}>
    <div className={styles.title}>{title}</div>
    <div
      className={styles.main}
      style={{
        padding,
        background,
      }}
    >
      {children}
    </div>
  </div>
)
